<template>
  <PageContainer>
    <view class="container">
      <Header title="供需数据" v-model="headerHeight" />
      <CustomTopTips text="仅统计您分享链接的数据记录"></CustomTopTips>
      <view class="p-16 bg-white">
        <text class="fz-16 linh-24">关联供需</text>
        <view class="disFlxAC p-12 br-8 my-12" style="background: #f2f3f5">
          <TImage
            width="40rpx"
            height="40rpx"
            :src="`https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/${
              boType === BoTypeEnum.Demand ? 'xu' : 'gong'
            }.png`"
          />
          <text class="ml-4 mr-10 fz-14 linh-20 ov-1 flex-1">
            {{ title }}
          </text>
          <!-- <text class="ali-icon" style="color: #969799">&#xe67b;</text> -->
        </view>
        <StatisticsCard
          :datas="statisticsData"
          title="推广数据"
          item-width="196rpx"
        ></StatisticsCard>
      </view>
      <view class="tabs-box" :style="{ top: headerHeight + 'px' }">
        <view class="tab">
          <Tabs v-model="currentTab" background-color="#FFF" :isScrollTop="false">
            <TabNav tabBarColor="#2878FF" />
            <template v-if="tabsData?.length">
              <TabsItem
                v-for="(item, index) in tabsData"
                @click="() => handleTabClick(item)"
                :key="index"
                :name="item.title"
                :value="item.index"
              ></TabsItem>
            </template>
          </Tabs>
        </view>
      </view>
      <view>
        <Paglist
          v-model="dataList"
          :is-init-api="false"
          :parame="parame"
          @register="register"
          :scroll-top-bottom="260"
          :is-show-loadmore="dataList.length >= 1"
        >
          <template v-for="v in dataList" :key="v.id">
            <view class="list-item">
              <PresonItemBrowsingHistory
                :data="v"
                @to-detail="toDetail(v)"
              ></PresonItemBrowsingHistory>
            </view>
          </template>
        </Paglist>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* businessOpportunitiesData 供需数据 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import CustomTopTips from '@/components/CustomTopTips/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import StatisticsCard from '../../components/StatisticsCard/index.vue';
  import { provide, reactive, ref } from 'vue';
  import type { IDataItem } from '../../components/StatisticsCard/DataItem.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import PresonItemBrowsingHistory from './components/PresonItemBrowsingHistory.vue';
  import { navigateTo, onLoad } from '@/router';
  import {
    browseCountDataList,
    getBoCountInfo,
    getPromotionDetailStatistics,
    promotionBrowseList,
  } from '@/api/businessOpportunities';
  import { BoTypeEnum, IntentionStatusEnum } from '@/enums/businessOpportunitiesEnum';
  import type {
    IPromotionBrowseRecord,
    IPromotionBrowseRecordQuery,
  } from '@/api/businessOpportunities/type';
  const headerHeight = ref(0);

  const title = ref('');
  const boType = ref(BoTypeEnum.Demand);
  onLoad<'BusinessOpportunitiesData'>((op) => {
    queryBoCountInfo(op.boInfoId);
    parame.dataId = op.boInfoId;
    if (op.currentTab) {
      currentTab.value = op.currentTab;
      parame.collect = true;
    }
    refresh();
  });
  const statisticsData = reactive<IDataItem[]>([
    {
      name: '浏览次数',
      num: 0,
      unit: '次',
    },
    {
      name: '浏览人数',
      num: 0,
      unit: '个',
    },
    {
      name: '收藏人数',
      num: 0,
      unit: '个',
    },
    {
      name: '累计意向',
      num: 0,
      unit: '个',
    },
    {
      name: '待联系',
      num: 0,
      unit: '个',
    },
    {
      name: '已联系',
      num: 0,
      unit: '个',
    },
  ]);

  const currentTab = ref(0);
  const tabsData = ref<
    {
      title: string;
      applyStatus: IntentionStatusEnum | undefined;
      collect: boolean | undefined;
      index: number;
    }[]
  >([
    {
      title: '全部浏览',
      applyStatus: undefined,
      collect: undefined,
      index: 0,
    },
    {
      title: '已提交意向',
      applyStatus: IntentionStatusEnum.pending,
      collect: undefined,
      index: 1,
    },
    {
      title: '已联系',
      applyStatus: IntentionStatusEnum.success,
      collect: undefined,
      index: 2,
    },
    {
      title: '不合适',
      applyStatus: IntentionStatusEnum.unsuitable,
      collect: undefined,
      index: 3,
    },
    {
      title: '已收藏',
      applyStatus: undefined,
      collect: true,
      index: 4,
    },
  ]);
  const handleTabClick = (item: {
    title: string;
    applyStatus: IntentionStatusEnum | undefined;
    collect: boolean | undefined;
    index: number;
  }) => {
    parame.applyStatus = item.applyStatus;
    parame.collect = item.collect;
    refresh();
  };

  provide('api', browseCountDataList);
  const dataList = ref<IPromotionBrowseRecord[]>([]);
  const parame = reactive<IPromotionBrowseRecordQuery>({
    dataId: 0,
    applyStatus: undefined,
    collect: undefined,
    current: 1,
    size: 10,
  });
  const [register, { refresh }] = useConList();

  const queryBoCountInfo = async (id: number) => {
    const res = await getBoCountInfo(id);
    statisticsData[0].num = res.browseNum;
    statisticsData[1].num = res.browsePeopleNum;
    statisticsData[2].num = res.collectPeopleNum;
    statisticsData[3].num = res.cooperationNum;
    statisticsData[4].num = res.waitMatchNum;
    statisticsData[5].num = res.cooperationSuccessNum;
    title.value = res.title;
    boType.value = res.boType;
  };

  const toDetail = (v: IPromotionBrowseRecord) => {
    navigateTo({
      name: 'businessOpportunitiesDataBrowse',
      options: {
        boInfoId: parame.dataId,
        queryAppUserInfoId: v.appUserInfoId,
      },
    });
  };
</script>

<style lang="scss" scoped>
  .container {
    .tabs-box {
      position: sticky;
      background-color: #ffffff;
      z-index: 999;
    }
    .list-item {
      padding: 0 30rpx;
      margin-bottom: 24rpx;
      &:nth-child(1) {
        padding-top: 24rpx;
      }
    }
  }
</style>
